<template>
    <div>
        <el-table
            ref="multipleTable"
            :data="list"
            tooltip-effect="dark"
            style="width: 100%"
        >
            <!-- @selection-change="handleSelectionChange" -->
            <el-table-column type="selection" width="55"> </el-table-column>

            <el-table-column prop="title" label="机型" width="220">
            </el-table-column>
            <el-table-column prop="market_price" label="价钱" width="320">
            </el-table-column>
            <el-table-column label="图片" width="280">
                <template slot-scope="scope">
                    <img
                        :src="scope.row.img_url"
                        alt=""
                        width="50px"
                        height="50px"
                    />
                </template>
            </el-table-column>
            <el-table-column label="详情" prop="zhaiyao"> </el-table-column>
            <el-table-column label="图片" width="280">
                <template slot-scope="scope">
                    <!-- <el-button type="primary" @click="del(scope.row.id)">删除</el-button> -->
                    <el-button type="primary" @click="add(scope.row)"
                        >添加</el-button
                    >
                </template>
            </el-table-column>
        </el-table>
        <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="pagenum"
            :page-sizes="[1, 2, 3, 4]"
            :page-size="pagesize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="list.length"
        >
        </el-pagination>
    </div>
</template>
<script>
import { getBanners } from "../../utils/api";
export default {
    data() {
        return {
            list: [],
            pagenum:1,
            pagesize:5
        };
    },
    mounted() {
        getBanners().then((res) => {
            this.list = res.data.message;
            console.log(this.list);
        });
    },
    computed: {
      reslist(){
        return  this.list.splice(
            this.pagesize*(this.pagenum-1),
            this.pagesize*this.pagenum
        )
            
        
      }
    },
    methods: {
        add(item) {
            this.$store.commit("add", item);
        },
        handleSizeChange(res){
            console.log(res)
            this.pagesize=res
        },
        handleCurrentChange(res){
            console.log(res)
            this.pagenum=res
        }
    },
};
</script>
<style lang="scss"></style>
